<template>
  <div class="wrap" :style="{ backgroundImage: 'url(' + imgsrc + ')' }">
    <button class="chang-bg" @click="changeImg">切换</button>

    <div class="form">
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>

        <el-form-item required>
          <el-col :span="11">
            <el-form-item prop="date1">
              <el-select v-model="ruleForm.grade" placeholder="请选择">
                <el-option
                  v-for="item in gradeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-form-item prop="date2">
              <el-cascader
                v-model="ruleForm.class"
                :options="classList"
              ></el-cascader>
            </el-form-item>
          </el-col>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="login">登陆</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      imgsrc: "/bg/bg1.png",
      imgsrcList: [
        "/bg/bg1.png",
        "/bg/bg2.png",
        "/bg/bg3.png",
        "/bg/bg4.png",
        "/bg/bg5.png",
      ],
      ruleForm: {
        name: "",
        grade: "",
        class: "",
      },
      gradeList: [
        {
          value: "web数字结构",
          label: "web数字结构",
        },
        {
          value: "html",
          label: "html",
        },
        {
          value: "css",
          label: "css",
        },
      ],
      classList: [],
    };
  },
  methods: {
    changeImg() {
      //   console.log(Math.random() * 5);
      let num = Math.floor(Math.random() * 5);
      //   Math.random() 是js自带的方法 得到一个0-1之间的随机数
      //   Math.floor 是向下取整
      this.imgsrc = this.imgsrcList[num];
    },
    login() {
      console.log(111);
      localStorage.setItem("token", "291bhosd1eg91i1i20");
      //登陆成功 把token 存在本地存储里
    },
  },
  beforeRouteEnter(to, from, next) {
    if (localStorage.getItem("token")) {
      next("/home");
    } else {
      next();
      //访问自己
    }
  },
  //如果登陆了 就不能再访问登陆页面了 要跳转到首页 没有登陆才能访问登陆页面
  created() {
    axios.get("select.json").then((res) => {
      console.log(res);
      this.classList = res.data.data;
      this.classList.forEach((i) => {
        i.label = i.value;
      });
    });
  },
  mounted() {},
  components: {},
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
.wrap {
  width: 100%;
  height: 100%;

  .chang-bg {
    position: fixed;
    bottom: 50px;
    right: 50px;
  }
  .form {
    width: 40%;
    height: 40%;
    left: 50%;
    top: 50%;
    position: fixed;
    transform: translate(-50%, -50%);
  }
}
</style>
